<div class="checkbox-root">
  <div>
    <h3 class="first">Basic</h3>
    <div class="ui-g" style="width:250px;margin-bottom:10px">
      <div class="ui-g-12">
        <p-checkbox name="group1" value="New York" label="New York" [(ngModel)]="selectedCities" inputId="ny"></p-checkbox>
      </div>
      <div class="ui-g-12">
        <p-checkbox name="group1" value="San Francisco" label="San Francisco" [(ngModel)]="selectedCities" inputId="sf"></p-checkbox>
      </div>
      <div class="ui-g-12">
        <p-checkbox name="group1" value="Los Angeles" label="Los Angeles" [(ngModel)]="selectedCities" inputId="la"></p-checkbox>
      </div>
    </div>
    <div>
      Selected Cities:
      <span *ngFor="let city of selectedCities" style="margin-right:10px">{{city}}</span>
    </div>
  </div>

  <div>
    <h3>Preselection</h3>
    <div class="ui-g" style="width:250px;margin-bottom:10px">
      <div class="ui-g-12">
        <p-checkbox name="group2" value="Technology" label="Technology" [(ngModel)]="selectedCategories" inputId="technology"></p-checkbox>
      </div>
      <div class="ui-g-12">
        <p-checkbox name="group2" value="Finance" label="Finance" [(ngModel)]="selectedCategories" inputId="finance"></p-checkbox>
      </div>
      <div class="ui-g-12">
        <p-checkbox name="group2" value="Sports" label="Sports" [(ngModel)]="selectedCategories" inputId="sports"></p-checkbox>
      </div>
      <div class="ui-g-12">
        <p-checkbox name="group2" value="Entertainment" label="Entertainment" [(ngModel)]="selectedCategories" inputId="entertainment"></p-checkbox>
      </div>
    </div>
    Selected Categories:
    <span *ngFor="let cat of selectedCategories" style="margin-right:10px">{{cat}} </span>
  </div>

  <div>
    <h3>Boolean - {{checked}}</h3>
    <p-checkbox [(ngModel)]="checked" binary="true"></p-checkbox>
  </div>
  <div>
    <h3>Object bindings</h3>
    <div class="ui-g">
      <div class="ui-g-3" *ngFor="let country of contryList">
        <p-checkbox name="country" [value]="country" [label]="country.name" [(ngModel)]="selectedCountries" [inputId]="country.code"></p-checkbox>
      </div>
    </div>
    <div>
      <h4>selected countries: </h4>
      <div>
          {{selectedCountries | json}}
      </div>
    </div>
  </div>
</div>
